<template>
  <div >
 <h2 style="margin-top:15px">
     <span>|</span>
     编辑推荐
     </h2>
 <div class="wrap">
<van-row gutter="1">
  <van-col span="8"  v-for="i in list" :key="i.id">
      <div class="item"  >
      <img :src="i.picUrl" alt="">
      <!-- <div class="total">{{num(i.playCount)}}万</div> -->
       <div class="total">{{i.playCount|num}}</div>
    <div class="info" >{{i.name}}</div>
      </div>
 </van-col >
</van-row>
  

 </div>
  </div>
</template>

<script>
// import api from "@/api"
export default {
    data(){
        return{
list:[]
        }
    },
    created(){
         this.getMusic()
        // console.log("this",this.$api);       
    },
    methods:{
       async getMusic(){  
        let res = await this.$api.getMusic()
             this.list=res.result
    // console.log(res.result)
} ,
// num(n){
//     return (n/10000).toFixed(1)
// }
        },
        filters:{
            num(val){
            if(!val){
return
            }else{
                val=val>9999?(val/10000).toFixed(1)+'万':val
                return val
                // return (val/10000).toFixed(1)
            }
            }
        }
    }

</script>

<style scoped>
/* h2 ::before{
    content: "";
} */
span {
    color:#C20C0C;

}
.wrap{
    margin-top: .3125rem
} 
 .wrap .item {
    position: relative;
} 
 .item img{
   width: 100%;
   vertical-align:middle
} 
 .item .total{
    color:#fff;
    position: absolute;
    right:3px;
    top: 2px
}
 .item .info{
    margin:.16rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}  
</style>

